<template>
	<div class="PerfectInfo">
		<div class="PerfectInfo-item">
			<div class="pi-left">更换头像</div>
			<div class="pi-right">
				<div class="pir-userimgbox">

					<img class="pir-userimg" v-if="baseInfodata.imgUrl==''" src="../assets/img/images/oinfouser_03.png" />
					<img class="pir-userimg" v-else :src="baseInfodata.imgUrl" />
				</div>
				<span class="pir-more"></span></div>
		</div>
		<div class="PerfectInfo-item">
			<div class="pi-left">用户名</div>
			<div class="pi-right" @click="openconfirm(1)">
				<div class="pir-text">{{mesusername}}</div>
				<span class="pir-more"></span></div>
		</div>
		<div class="PerfectInfo-item">
			<div class="pi-left">真实姓名</div>
			<div class="pi-right">
				<div class="pir-text" v-if="baseInfodata.userName==''">认证后自动生成</div>
				<div class="pir-text" v-else>{{baseInfodata.userName}}</div>
				<span class="pir-more"></span>
			</div>
		</div>
		<div class="PerfectInfo-item">
			<div class="pi-left">备用联系方式</div>
			<div class="pi-right">
				<div class="pir-text">设置备用联系方式</div>
				<span class="pir-more"></span></div>
		</div>
		<div class="PerfectInfo-item">
			<div class="pi-left">性别</div>
			<div class="pi-right" @click="show1 = true">
				<div class="pir-text">保密</div>
				<span class="pir-more"></span></div>
		</div>
		<div class="PerfectInfo-item">
			<div class="pi-left">所在城市</div>
			<div class="pi-right" @click="openconfirm(2)">
				<div class="pir-text">请设置您所在城市</div>
				<span class="pir-more"></span></div>
		</div>
		<div class="PerfectInfo-item">
			<div class="pi-left">职业</div>
			<div class="pi-right">
				<div class="pir-text">请选择您的职业</div>
				<span class="pir-more"></span></div>
		</div>
		<div class="PerfectInfo-item">
			<div class="pi-left">爱好</div>
			<div class="pi-right">
				<div class="pir-text">请选择您的爱好</div>
				<span class="pir-more"></span></div>
		</div>
		<div class="PerfectInfo-item">
			<div class="pi-left">自我介绍</div>
			<div class="pi-right">
				<div class="pir-text">未填写</div>
				<span class="pir-more"></span></div>
		</div>
				<yd-actionsheet :items="myItems1" v-model="show1" cancel="取消"></yd-actionsheet>
	
	</div>
	
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	export default {
		name: "PerfectInfo",
		data() {
				var that = this;
			return {
				atitle: "",
				ames: "",
				ytitle: "设置用户名",
				ymes: "<input class='mesinput' placeholder='请输入您的用户名' v-model='" + that.mesusername + "'/>",
				mesusername: "用户昵称",
				ctitle: "所在城市",
				cmes: "<input class='mesinput' placeholder='如：重庆' v-model='" + that.mesaddressname + "'/>",
				mesaddressname: "",
				   show1: false,
                myItems1: [
                    {
                        label: '男',
                        callback: () => {
                            that.$dialog.toast({mes: '男'});
                            /* 注意： callback: function() {} 和 callback() {}  这样是无法正常使用当前this的 */
                        }
                    },
                    {
                        label: '女',
                        callback: () => {
                            that.$dialog.toast({mes: '女'});
                        }
                    }
                ]
			}
		},
		mounted(){
		},
		computed: {
			...mapGetters([
				'source',
				'userinfo',
				'userstatus',
				'baseInfodata'
			])
		},
		methods: {
			SetBaseInfoApi(){
				api.SetBaseInfo()
				.then(res=>{
				})
			},
			openconfirm(sta) {
				var that = this;
				if(sta == 1) {
					that.atitle = that.ytitle;
					that.ames = that.ymes;
				}
				if(sta == 2) {
					that.atitle = that.ctitle;
					that.ames = that.cmes;
				}
				that.$dialog.confirm({
					title: that.atitle,
					mes: that.ames,
					opts: () => {
						that.$dialog.toast({
							mes: '你点了确定',
							timeout: 1000,
						});
					}
				});

			},
		}
	}
</script>

<style>
	@import url("../assets/css/orderalert.css");
	.PerfectInfo {
		width: 100%;
		background: #fff;
		font-size: .31rem;
		line-height: .31rem;
		color: #282828;
	}
	
	.PerfectInfo-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: .49rem .24rem;
		border-bottom: 1px solid #EEECEC;
		box-sizing: border-box;
	}
	
	.pir-userimgbox {
		width: .69rem;
		height: .69rem;
	}
	
	.pi-right {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	
	.pir-userimg {
		display: block;
		max-width: 100%;
		min-height: 100%;
		border-radius: 50%;
	}
	
	.pir-text {
		color: #a4a4a4;
	}
	
	.pir-more {
		display: block;
		width: .23rem;
		height: .23rem;
		border: 1px solid #a4a4a4;
		border-bottom: none;
		border-left: none;
		transform: rotate(45deg);
		margin-left: .1rem;
	}
</style>